<template>
  <view class="detail-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="nav-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">商品详情</text>
      </view>
      <view class="nav-right">
        <text class="share-icon" @click="handleShare">📤</text>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">正在加载商品详情...</text>
    </view>
    
    <!-- 菜品图片区域 -->
    <view v-else class="food-image-section">
      <image 
        :src="foodDetail.image" 
        mode="aspectFill"
        class="food-main-image"
      />
      <view class="image-overlay">
        <view class="discount-badge" v-if="foodDetail.originalPrice && foodDetail.price">
          <text class="discount-text">{{ discountText }}</text>
        </view>
        <view class="hot-tag" v-if="foodDetail.isHot">
          <text class="hot-text">🔥 爆款</text>
        </view>
      </view>
    </view>
    
    <!-- 菜品信息区域 -->
    <view class="food-info-section">
      <!-- 价格区域 -->
      <view class="price-section">
        <view class="current-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ foodDetail.price }}</text>
        </view>
        <view class="original-price" v-if="foodDetail.originalPrice">
          <text class="original-text">原价 ¥{{ foodDetail.originalPrice }}</text>
        </view>
        <view class="savings" v-if="foodDetail.originalPrice">
          <text class="savings-text">省¥{{ (parseFloat(foodDetail.originalPrice) - parseFloat(foodDetail.price)).toFixed(1) }}</text>
        </view>
      </view>
      
      <!-- 菜品名称 -->
      <view class="food-name-section">
        <text class="food-name">{{ foodDetail.name }}</text>
        
        <!-- 商家信息 -->
        <view class="merchant-info-row">
          <view class="merchant-logo-container">
            <image 
              v-if="foodDetail.merchantLogo" 
              :src="foodDetail.merchantLogo" 
              class="merchant-logo-small" 
              mode="aspectFill"
              @error="onMerchantLogoError"
            />
            <view v-else class="merchant-logo-placeholder-small">
              <text class="logo-placeholder-text">{{ foodDetail.merchantInitial }}</text>
            </view>
          </view>
          <view class="merchant-text-info">
            <text class="store-name-main">{{ foodDetail.storeName || '商家入驻中' }}</text>
            <view class="rating-section" v-if="foodDetail.rating" @click="goToMerchantReviews">
              <text class="rating-text">⭐ {{ foodDetail.rating }}</text>
              <text class="rating-count">({{ foodDetail.ratingCount }}人评价)</text>
              <text class="view-reviews-icon">→</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 菜品详情 -->
      <view class="food-detail-section">
        <text class="detail-label">菜品详情</text>
        <text class="detail-content">{{ foodDetail.description }}</text>
        <view class="detail-tags" v-if="foodDetail.tags">
          <text 
            class="detail-tag" 
            v-for="(tag, index) in foodDetail.tags" 
            :key="index"
          >
            {{ tag }}
          </text>
        </view>
      </view>
      
      <!-- 配送信息 -->
      <view class="delivery-section">
        <view class="delivery-item">
          <text class="delivery-label">配送费</text>
          <text class="delivery-fee">¥{{ foodDetail.deliveryFee || '0' }}</text>
        </view>
        <view class="delivery-item">
          <text class="delivery-label">预计送达</text>
          <text class="delivery-time">{{ foodDetail.deliveryTime || '30-45分钟' }}</text>
        </view>
        <view class="delivery-item">
          <text class="delivery-label">起送价</text>
          <text class="min-order">满¥{{ foodDetail.minOrder || '20' }}起送</text>
        </view>
      </view>
      
      <!-- 销量信息 -->
      <view class="sales-info">
        <text class="sales-text">已售{{ foodDetail.sold || 0 }}件</text>
        <text class="stock-text" v-if="foodDetail.stock">仅剩{{ foodDetail.stock }}件</text>
      </view>
    </view>
    
    <!-- 正在进行的拼单活动 -->
    <view class="active-groups-section" v-if="activeGroups.length > 0">
      <view class="section-header">
        <text class="section-title">正在进行的拼单</text>
        <text class="section-subtitle">参与即可享拼单价</text>
      </view>
      
      <view class="active-groups-list">
        <view 
          class="active-group-card" 
          v-for="group in activeGroups" 
          :key="group.id"
          @click="goToGroupDetail(group.id)"
        >
          <view class="group-card-left">
            <view class="group-initiator">
              <image :src="group.initiatorAvatar || '/static/avatar.jpg'" class="initiator-avatar" />
              <text class="initiator-name">{{ group.initiatorName }}</text>
              <text class="initiator-label">发起</text>
            </view>
            <view class="group-progress">
              <text class="progress-text">还差{{ group.remainingSlots }}人成团</text>
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: group.progress + '%' }"></view>
              </view>
            </view>
          </view>
          <view class="group-card-right">
            <button class="join-group-btn" @click.stop="joinGroup(group)">
              <text class="join-btn-text">去拼单</text>
            </button>
            <text class="group-price">¥{{ group.groupPrice }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部购买按钮 -->
    <view class="bottom-purchase">
      <view class="purchase-buttons">
        <button 
          class="create-group-btn" 
          @click="openSheet('create')"
        >
          <view class="btn-content">
            <text class="btn-icon">👥</text>
            <text class="btn-text">发起拼单</text>
            <text class="btn-price">¥{{ foodDetail.price }}</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 半屏拼单创建弹窗 -->
    <view class="sheet-mask" v-if="sheetVisible" @click="closeSheet"></view>
    <view class="purchase-sheet" v-if="sheetVisible" @click.stop>
      <view class="sheet-header">
        <view class="drag-bar"></view>
        <view class="sheet-top">
          <image :src="foodDetail.image" mode="aspectFill" class="sheet-thumb" />
          <view class="sheet-price-wrap">
            <view class="sheet-price-row">
              <text class="sheet-price-symbol">¥</text>
              <text class="sheet-price-value">{{ foodDetail.price }}</text>
              <text class="sheet-original" v-if="foodDetail.originalPrice">原价 ¥{{ foodDetail.originalPrice }}</text>
            </view>
            <text class="sheet-name">{{ foodDetail.name }}</text>
          </view>
        </view>
      </view>

      <view class="sheet-body">
        <!-- 拼单标题 -->
        <view class="row">
          <text class="row-label">拼单标题</text>
        </view>
        <view class="input-row">
          <input 
            class="group-input" 
            v-model="groupTitle"
            placeholder="给你的拼单起个名字"
            maxlength="50"
          />
        </view>
        
        <!-- 拼单人数 -->
        <view class="row between">
          <text class="row-label">拼单人数</text>
          <view class="stepper">
            <view class="step-btn" :class="{ disabled: groupSize <= 2 }" @click="decrementGroupSize">-</view>
            <text class="step-num">{{ groupSize }}人</text>
            <view class="step-btn" :class="{ disabled: groupSize >= 10 }" @click="incrementGroupSize">+</view>
          </view>
        </view>
        
        <!-- 份数选择 -->
        <view class="row between">
          <text class="row-label">我要购买</text>
          <view class="stepper">
            <view class="step-btn" :class="{ disabled: quantity<=1 }" @click="decrement">-</view>
            <text class="step-num">{{ quantity }}份</text>
            <view class="step-btn" @click="increment">+</view>
          </view>
        </view>

        <!-- 口味/辣度选择 -->
        <view class="row">
          <text class="row-label">辣度</text>
        </view>
        <view class="chips">
          <view 
            v-for="(opt, idx) in spiceOptions" 
            :key="idx" 
            class="chip" 
            :class="{ active: selectedSpiceIndex === idx }"
            @click="selectSpice(idx)"
          >
            {{ opt }}
          </view>
        </view>
        
        <!-- 拼单时长 -->
        <view class="row">
          <text class="row-label">拼单时长</text>
        </view>
        <view class="chips">
          <view 
            v-for="(hour, idx) in durationOptions" 
            :key="idx" 
            class="chip" 
            :class="{ active: selectedDurationIndex === idx }"
            @click="selectDuration(idx)"
          >
            {{ hour }}小时
          </view>
        </view>
        
        <!-- 价格说明 -->
        <view class="price-tips">
          <text class="tips-text">💰 拼单成功后，您需支付 ¥{{ totalPrice }}</text>
        </view>
      </view>

      <view class="sheet-footer">
        <button class="confirm-btn" @click="confirmCreateGroup">发起拼单</button>
      </view>
    </view>
  </view>
</template>

<script>
import foodService from '../../services/food.js'
import groupBuyingService from '../../services/group-buying.js'
import api from '../../services/api.js'
import { backToHome } from '../../utils/navigation.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      loading: false,
      loadingGroups: false,
      foodDetail: {
        id: 1,
        name: '野生大翘嘴',
        price: '39.9',
        originalPrice: '59.9',
        image: '/static/food1.jpg',
        storeName: '渔味鲜楼',
        merchantLogo: '',
        merchantInitial: '渔',
        description: '精选野生大翘嘴，肉质鲜嫩，营养丰富。采用传统烹饪工艺，保持食材原汁原味，口感鲜美，是您不可错过的美味佳肴。',
        deliveryFee: '5',
        deliveryTime: '30-45分钟',
        minOrder: '20',
        sold: 128,
        stock: 15,
        rating: '4.8',
        ratingCount: 256,
        discount: '限时5折',
        isHot: true,
        urgency: true,
        tags: ['新鲜', '野生', '营养', '美味']
      },
      // 拼单活动列表
      activeGroups: [],
      // 半屏弹窗相关
      sheetVisible: false,
      sheetMode: 'create', // 'create' 发起拼单
      quantity: 1,
      spiceOptions: ['不辣', '微辣', '中辣', '重辣'],
      selectedSpiceIndex: 0,
      // 拼单表单
      groupTitle: '',
      groupSize: 3, // 默认3人拼单
      durationOptions: [6, 12, 24, 48],
      selectedDurationIndex: 2 // 默认24小时
    }
  },
  onLoad(options) {
    this.getStatusBarHeight()
    // 如果有传递的商品ID，可以在这里获取商品详情
    if (options.id) {
      this.loadFoodDetail(options.id)
      this.loadActiveGroups(options.id)
    }
    // 接收首页传入的基础展示数据
    if (options.merchantId) this.foodDetail.merchantId = parseInt(options.merchantId)  // ⭐ 接收商家ID
    if (options.storeName) this.foodDetail.storeName = decodeURIComponent(options.storeName)
    if (options.name) this.foodDetail.name = decodeURIComponent(options.name)
    if (options.price) this.foodDetail.price = decodeURIComponent(options.price)
    if (options.originalPrice) this.foodDetail.originalPrice = decodeURIComponent(options.originalPrice)
    if (options.image) this.foodDetail.image = decodeURIComponent(options.image)
    if (options.deliveryFee) this.foodDetail.deliveryFee = decodeURIComponent(options.deliveryFee)  // ⭐ 接收配送费
    
    // 初始化拼单标题
    if (this.foodDetail.name) {
      this.groupTitle = `一起拼${this.foodDetail.name}`
    }
  },
  computed: {
    // 合计价 = 拼单价 * 份数
    totalPrice() {
      const price = parseFloat(this.foodDetail.price || 0)
      const total = price * this.quantity
      return total.toFixed(2)
    },
    // 顶部折扣文案
    discountText() {
      const p = parseFloat(this.foodDetail.price)
      const o = parseFloat(this.foodDetail.originalPrice)
      if (!o || !p || o <= 0) return ''
      const d = Math.round((p / o) * 1000) / 100
      return `${d}折`
    }
  },
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
      // 设置 CSS 变量，用于固定导航栏定位
      document.documentElement.style.setProperty('--status-bar-height', this.statusBarHeight + 'px')
    },
    
    // 加载商品详情
    async loadFoodDetail(id) {
      if (!id || this.loading) return
      
      this.loading = true
      
      try {
        console.log('开始加载商品详情:', id)
        
        // 调用商品详情API
        const response = await foodService.getFoodDetail(id)
        console.log('商品详情API响应:', response)
        
        // 解析响应数据
        const foodData = response?.data || response
        
        if (foodData && foodData.id) {
          // 更新商品详情数据 - 根据API文档优化字段映射
          const storeName = foodData.merchantName || foodData.merchant_name || 
                           (foodData.merchant && foodData.merchant.name) || '未知商家'
          
          const merchantId = foodData.merchant_id || foodData.merchantId || (foodData.merchant && foodData.merchant.id)
          
          this.foodDetail = {
            id: foodData.id,
            merchantId: merchantId, // 保存商家ID
            name: foodData.name || '未知商品',
            price: String(foodData.price || '0'),
            originalPrice: String(foodData.originalPrice || foodData.original_price || ''),
            image: foodData.image || '/static/default-food.jpg',
            storeName: storeName,
            // 商家Logo（后端接口需要返回）
            merchantLogo: foodData.merchantLogo || foodData.merchant_logo || 
                         (foodData.merchant && foodData.merchant.logo) || '',
            merchantInitial: storeName.charAt(0).toUpperCase(),
            description: foodData.description || '暂无描述',
            // 从商家信息中获取配送相关数据
            deliveryFee: String(foodData.merchant?.deliveryFee || foodData.merchant?.delivery_fee || '5'),
            deliveryTime: '30-45分钟', // 默认配送时间
            minOrder: String(foodData.merchant?.minOrderAmount || foodData.merchant?.min_order_amount || '20'),
            sold: foodData.soldCount || foodData.sold_count || 0,
            stock: foodData.stock || 999,
            rating: '5.0', // 临时默认值，稍后从商家详情获取
            ratingCount: 0, // 临时默认值，稍后从商家详情获取
            discount: foodData.originalPrice || foodData.original_price ? '限时优惠' : '',
            isHot: !!(foodData.isHot || foodData.is_hot),
            urgency: (foodData.stock || 999) < 10,
            tags: this.parseTags(foodData.tags)
          }
          
          // ⭐ 额外调用商家详情API获取评价数据
          if (merchantId) {
            this.loadMerchantRating(merchantId)
          }
          
          // 解析辣度选项
          if (foodData.spiceLevels || foodData.spice_levels) {
            this.spiceOptions = this.parseSpiceLevels(foodData.spiceLevels || foodData.spice_levels)
          }
          
          console.log('商品详情加载成功:', this.foodDetail)
          
          uni.showToast({
            title: '商品详情加载成功',
            icon: 'success',
            duration: 1500
          })
          
        } else {
          throw new Error('商品数据格式错误')
        }
        
      } catch (error) {
        console.error('加载商品详情失败:', error)
        
        // 详细的错误日志记录
        this.addErrorLog('loadFoodDetail', error, { foodId: id })
        
        // 根据错误类型显示不同的提示
        let errorMessage = '商品详情加载失败'
        if (error.message.includes('404')) {
          errorMessage = '商品不存在或已下架'
        } else if (error.message.includes('网络')) {
          errorMessage = '网络连接失败，请检查网络'
        } else if (error.message.includes('timeout')) {
          errorMessage = '请求超时，请重试'
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'error',
          duration: 2000
        })
        
        // 3秒后自动返回上一页（商品不存在的情况）
        if (error.message.includes('404')) {
          setTimeout(() => {
            uni.showModal({
              title: '提示',
              content: '商品不存在，即将返回上一页',
              showCancel: false,
              success: () => {
                backToHome()
              }
            })
          }, 2000)
        }
        
      } finally {
        this.loading = false
      }
    },
    
    // ⭐ 加载商家评价数据
    async loadMerchantRating(merchantId) {
      try {
        // 调用商家详情API (与 merchant-menu.vue 保持一致)
        const response = await api.get(`/merchants/${merchantId}`, {}, { needAuth: false })
        
        if (response.code === 200 && response.data) {
          const merchantData = response.data
          
          // 更新评价数据
          this.foodDetail.rating = String(merchantData.rating || '5.0')
          this.foodDetail.ratingCount = merchantData.ratingCount || 0
        }
      } catch (error) {
        console.error('加载商家评价数据失败:', error)
        // 静默失败，不影响页面显示
      }
    },
    
    // 解析标签数据
    parseTags(tags) {
      if (Array.isArray(tags)) {
        return tags
      }
      if (typeof tags === 'string') {
        try {
          return JSON.parse(tags)
        } catch (e) {
          return tags.split(',').map(t => t.trim())
        }
      }
      return ['新鲜', '美味'] // 默认标签
    },
    
    // 解析辣度选项
    parseSpiceLevels(spiceLevels) {
      if (Array.isArray(spiceLevels)) {
        return spiceLevels
      }
      if (typeof spiceLevels === 'string') {
        try {
          return JSON.parse(spiceLevels)
        } catch (e) {
          return spiceLevels.split(',').map(s => s.trim())
        }
      }
      return ['不辣', '微辣', '中辣', '重辣'] // 默认辣度
    },
    
    // 返回上一页
    goBack() {
      backToHome()
    },
    
    // 分享功能
    handleShare() {
      uni.showActionSheet({
        itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
        success: (res) => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
    },
    
    // 商家Logo加载失败
    onMerchantLogoError() {
      console.log('商家Logo加载失败')
      this.foodDetail.merchantLogo = ''
    },
    
    // 跳转到商家评价页面
    goToMerchantReviews() {
      const merchantId = this.foodDetail.merchantId
      if (!merchantId) {
        uni.showToast({
          title: '商家信息加载中',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/reviews/reviews?merchantId=${merchantId}`
      })
    },
    
    // 加载该商品的活跃拼单列表
    async loadActiveGroups(foodId) {
      if (!foodId || this.loadingGroups) return
      
      this.loadingGroups = true
      
      try {
        console.log('加载活跃拼单列表 - 商品ID:', foodId)
        
        // 调用拼单活动列表API，只获取该商品的活跃拼单
        const response = await groupBuyingService.getActivityList({
          status: 'active',
          limit: 10
        })
        
        console.log('活跃拼单列表响应:', response)
        
        const activities = response?.data?.activities || response?.data || []
        
        // 过滤出该商品的拼单，并格式化
        this.activeGroups = activities
          .filter(act => (act.food_id || act.foodId) == foodId)
          .map(act => groupBuyingService.formatActivityForList(act))
          .slice(0, 3) // 只显示前3个
        
        console.log('活跃拼单列表（格式化后）:', this.activeGroups)
      } catch (error) {
        console.error('加载活跃拼单列表失败:', error)
        // 不显示错误提示，静默失败
        this.activeGroups = []
      } finally {
        this.loadingGroups = false
      }
    },
    
    // 跳转到拼单详情页
    goToGroupDetail(activityId) {
      uni.navigateTo({
        url: `/pages/group-buying-detail/group-buying-detail?id=${activityId}`
      })
    },
    
    // 参与拼单
    async joinGroup(group) {
      // 检查登录
      const token = uni.getStorageSync('jwt_token')
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
        return
      }
      
      // 跳转到拼单详情页（让用户确认后再参与）
      this.goToGroupDetail(group.id)
    },
    
    // 打开半屏弹窗（发起拼单）
    openSheet(mode) {
      // 检查登录
      const token = uni.getStorageSync('jwt_token')
      if (!token) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)
        return
      }
      
      this.sheetMode = mode
      this.quantity = 1
      this.sheetVisible = true
      
      // 初始化拼单标题
      if (this.foodDetail.name && !this.groupTitle) {
        this.groupTitle = `一起拼${this.foodDetail.name}`
      }
    },
    
    // 关闭弹窗
    closeSheet() {
      this.sheetVisible = false
    },
    
    // 数量加减
    increment() {
      this.quantity += 1
    },
    decrement() {
      if (this.quantity > 1) this.quantity -= 1
    },
    
    // 拼单人数加减
    incrementGroupSize() {
      if (this.groupSize < 10) this.groupSize += 1
    },
    decrementGroupSize() {
      if (this.groupSize > 2) this.groupSize -= 1
    },
    
    // 选择辣度
    selectSpice(index) {
      this.selectedSpiceIndex = index
    },
    
    // 选择拼单时长
    selectDuration(index) {
      this.selectedDurationIndex = index
    },
    
    // 确认发起拼单
    confirmCreateGroup() {
      // 验证必要数据
      if (!this.foodDetail.id) {
        uni.showToast({
          title: '商品信息缺失',
          icon: 'error'
        })
        return
      }
      
      if (!this.groupTitle || this.groupTitle.trim() === '') {
        uni.showToast({
          title: '请输入拼单标题',
          icon: 'none'
        })
        return
      }
      
      const merchantId = this.foodDetail.merchantId || this.foodDetail.merchant_id
      if (!merchantId) {
        uni.showToast({
          title: '商家信息缺失',
          icon: 'error'
        })
        return
      }
      
      this.closeSheet()
      
      // 跳转到订单确认页，携带拼单参数
      const spiceLevel = this.spiceOptions[this.selectedSpiceIndex]
      const durationHours = this.durationOptions[this.selectedDurationIndex]
      const totalPrice = (parseFloat(this.foodDetail.price) * this.quantity).toFixed(2)
      
      console.log('发起拼单 - 跳转到订单页')
      
      uni.navigateTo({
        url: `/pages/order/order?` +
             `type=create_group` +
             `&foodId=${this.foodDetail.id}` +
             `&merchantId=${merchantId}` +
             `&name=${encodeURIComponent(this.foodDetail.name)}` +
             `&image=${encodeURIComponent(this.foodDetail.image || '/static/food1.jpg')}` +
             `&price=${this.foodDetail.price}` +
             `&storeName=${encodeURIComponent(this.foodDetail.storeName || '商家')}` +
             `&quantity=${this.quantity}` +
             `&spice=${encodeURIComponent(spiceLevel)}` +
             `&totalPrice=${totalPrice}` +
             `&deliveryFee=${this.foodDetail.deliveryFee || 0}` +  // ⭐ 传递配送费
             `&groupTitle=${encodeURIComponent(this.groupTitle.trim())}` +
             `&groupSize=${this.groupSize}` +
             `&durationHours=${durationHours}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 加载状态样式 */
.loading-container {
  margin-top: calc(var(--status-bar-height) + 88rpx);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  
  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 999;
}

.top-nav {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background: #fff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  z-index: 998;
  
  .nav-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    .back-icon {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .nav-center {
    flex: 1;
    text-align: center;
    
    .nav-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .nav-right {
    width: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .share-icon {
      font-size: 32rpx;
      color: #333;
      cursor: pointer;
    }
  }
}

.food-image-section {
  position: relative;
  width: 100%;
  height: 500rpx;
  background: #f0f0f0;
  margin-top: 88rpx; // 导航栏高度
  
  .food-main-image {
    width: 100%;
    height: 100%;
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20rpx;
    
    .discount-badge {
      background: #ff4757;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      
      .discount-text {
        font-size: 24rpx;
        color: #fff;
        font-weight: 600;
      }
    }
    
    .hot-tag {
      background: rgba(255, 193, 7, 0.9);
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      
      .hot-text {
        font-size: 24rpx;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}

.food-info-section {
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;
}

.price-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .current-price {
    display: flex;
    align-items: baseline;
    margin-right: 20rpx;
    
    .price-symbol {
      font-size: 32rpx;
      color: #ff4757;
      font-weight: 600;
    }
    
    .price-value {
      font-size: 48rpx;
      color: #ff4757;
      font-weight: 700;
    }
  }
  
  .original-price {
    margin-right: 20rpx;
    
    .original-text {
      font-size: 28rpx;
      color: #999;
      text-decoration: line-through;
    }
  }
  
  .savings {
    background: #ff4757;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    
    .savings-text {
      font-size: 22rpx;
      color: #fff;
      font-weight: 600;
    }
  }
}

.food-name-section {
  margin-bottom: 30rpx;
  
  .food-name {
    display: block;
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 16rpx;
    line-height: 1.4;
  }
  
  .merchant-info-row {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 10rpx;
  }
  
  .merchant-logo-container {
    flex-shrink: 0;
  }
  
  .merchant-logo-small {
    width: 60rpx;
    height: 60rpx;
    border-radius: 12rpx;
    background: #f0f0f0;
    border: 1rpx solid #e0e0e0;
  }
  
  .merchant-logo-placeholder-small {
    width: 60rpx;
    height: 60rpx;
    border-radius: 12rpx;
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    
    .logo-placeholder-text {
      font-size: 24rpx;
      font-weight: 700;
      color: #ff8a00;
    }
  }
  
  .merchant-text-info {
    flex: 1;
    min-width: 0;
  }
  
  .store-name-main {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 6rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .rating-section {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4rpx 8rpx;
    border-radius: 8rpx;
    transition: background 0.3s ease;
    
    &:active {
      background: rgba(255, 167, 38, 0.1);
    }
    
    .rating-text {
      font-size: 24rpx;
      color: #ffa726;
      margin-right: 10rpx;
    }
    
    .rating-count {
      font-size: 24rpx;
      color: #999;
    }
    
    .view-reviews-icon {
      font-size: 24rpx;
      color: #ffa726;
      margin-left: 8rpx;
    }
  }
}

.food-detail-section {
  margin-bottom: 30rpx;
  
  .detail-label {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .detail-content {
    display: block;
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }
  
  .detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    
    .detail-tag {
      background: #f0f0f0;
      color: #666;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      font-size: 22rpx;
    }
  }
}

.delivery-section {
  margin-bottom: 30rpx;
  
  .delivery-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .delivery-label {
      font-size: 28rpx;
      color: #333;
    }
    
    .delivery-fee {
      font-size: 28rpx;
      color: #ff4757;
      font-weight: 600;
    }
    
    .delivery-time {
      font-size: 28rpx;
      color: #666;
    }
    
    .min-order {
      font-size: 28rpx;
      color: #666;
    }
  }
}

.sales-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  
  .sales-text {
    font-size: 26rpx;
    color: #666;
  }
  
  .stock-text {
    font-size: 26rpx;
    color: #ff4757;
    font-weight: 600;
  }
}

// 正在进行的拼单活动样式
.active-groups-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
    }
    
    .section-subtitle {
      font-size: 24rpx;
      color: #ff4757;
    }
  }
  
  .active-groups-list {
    .active-group-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx;
      background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
      border: 2rpx solid #ffe8e8;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .group-card-left {
        flex: 1;
        margin-right: 20rpx;
        
        .group-initiator {
          display: flex;
          align-items: center;
          margin-bottom: 15rpx;
          
          .initiator-avatar {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 15rpx;
            border: 2rpx solid #fff;
          }
          
          .initiator-name {
            font-size: 26rpx;
            color: #333;
            font-weight: 600;
            margin-right: 8rpx;
          }
          
          .initiator-label {
            font-size: 22rpx;
            color: #ff4757;
            background: #ffe8e8;
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
          }
        }
        
        .group-progress {
          .progress-text {
            display: block;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 10rpx;
          }
          
          .progress-bar {
            width: 100%;
            height: 12rpx;
            background: #f0f0f0;
            border-radius: 6rpx;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #ff6b6b 0%, #ff4757 100%);
              border-radius: 6rpx;
              transition: width 0.3s ease;
            }
          }
        }
      }
      
      .group-card-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .join-group-btn {
          background: #ff4757;
          color: #fff;
          padding: 12rpx 30rpx;
          border-radius: 25rpx;
          font-size: 26rpx;
          font-weight: 600;
          border: none;
          margin-bottom: 10rpx;
          
          &::after {
            border: none;
          }
          
          .join-btn-text {
            color: #fff;
          }
        }
        
        .group-price {
          font-size: 28rpx;
          color: #ff4757;
          font-weight: 700;
        }
      }
    }
  }
}

.bottom-purchase {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .purchase-buttons {
    display: flex;
    gap: 20rpx;
    
    .create-group-btn {
      flex: 1;
      height: 96rpx;
      background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
      border: none;
      border-radius: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
      
      &::after {
        border: none;
      }
      
      &:active {
        transform: scale(0.98);
      }
      
      .btn-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10rpx;
        
        .btn-icon {
          font-size: 36rpx;
        }
        
        .btn-text {
          font-size: 32rpx;
          color: #fff;
          font-weight: 700;
        }
        
        .btn-price {
          font-size: 32rpx;
          color: #fff;
          font-weight: 700;
          padding: 2rpx 8rpx;
          border-radius: 8rpx;
          
          .urgency-text {
            font-size: 18rpx;
            color: #fff;
            font-weight: 600;
          }
        }
      }
    }
  }
}

/* 半屏弹窗样式 */
.sheet-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
}

.purchase-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60vh;
  background: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}

.sheet-header {
  padding: 16rpx 24rpx 0;
  .drag-bar {
    width: 120rpx;
    height: 8rpx;
    background: #eaeaea;
    border-radius: 8rpx;
    margin: 0 auto 16rpx;
  }
  .sheet-top {
    display: flex;
    gap: 20rpx;
    align-items: center;
  }
  .sheet-thumb {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    background: #f0f0f0;
  }
  .sheet-price-wrap {
    flex: 1;
  }
  .sheet-price-row {
    display: flex;
    align-items: baseline;
    gap: 12rpx;
  }
  .sheet-price-symbol { font-size: 30rpx; color: #ff4757; font-weight: 700; }
  .sheet-price-value { font-size: 48rpx; color: #ff4757; font-weight: 800; }
  .sheet-original { font-size: 24rpx; color: #999; text-decoration: line-through; }
  .sheet-name { display: block; margin-top: 8rpx; font-size: 28rpx; color: #333; font-weight: 600; }
}

.sheet-body {
  padding: 20rpx 24rpx;
  flex: 1;
  overflow-y: auto;
}

.row { margin: 16rpx 0; display: flex; align-items: center; }
.between { justify-content: space-between; }
.row-label { font-size: 28rpx; color: #333; }
.store-value { font-size: 28rpx; color: #666; margin-left: 20rpx; }

.stepper { display: flex; align-items: center; gap: 16rpx; }
.step-btn {
  width: 56rpx; height: 56rpx; border-radius: 14rpx;
  background: #f5f5f5; color: #333; display: flex; align-items: center; justify-content: center;
  font-size: 36rpx; font-weight: 700;
}
.step-btn.disabled { opacity: 0.4; }
.step-num { font-size: 30rpx; color: #333; min-width: 40rpx; text-align: center; }

.total-row { justify-content: space-between; }
.total-price { display: flex; align-items: baseline; }
.total-symbol { font-size: 28rpx; color: #ff4757; font-weight: 700; }
.total-value { font-size: 40rpx; color: #ff4757; font-weight: 800; }

.chips { display: flex; flex-wrap: wrap; gap: 16rpx; margin-top: 8rpx; }
.chip {
  padding: 12rpx 24rpx; border-radius: 28rpx; background: #f5f5f5; color: #666; font-size: 26rpx;
}
.chip.active { background: #ffe6e8; color: #ff4757; border: 2rpx solid #ffb3ba; }

.input-row {
  margin: 12rpx 0 20rpx 0;
  
  .group-input {
    width: 100%;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 20rpx 24rpx;
    font-size: 28rpx;
    color: #333;
  }
}

.price-tips {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #fff9e6;
  border-radius: 12rpx;
  border-left: 4rpx solid #ffa726;
  
  .tips-text {
    font-size: 26rpx;
    color: #ff6b00;
    line-height: 1.5;
  }
}

.sheet-footer { padding: 16rpx 24rpx 24rpx; }
.confirm-btn {
  width: 100%; height: 88rpx; border-radius: 44rpx; border: none;
  background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
  color: #fff; font-size: 32rpx; font-weight: 700;
}
</style>
